// 获取
function renderCategory() {
  axios.get('/my/category/list').then(res => {
    // console.log(res.data)
    let {status,data} = res.data
    if (status === 0) {
      let str = ''
      data.forEach(item => {
        str += `
        <tr>
          <td>${item.name}</td>
          <td>${item.alias}</td>
          <td>
            <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
            <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr>
        `
      })
      $('tbody').html(str)
    }
  })
}
renderCategory()

// 删除
$('tbody').on('click','.del',function () {
  let id = $(this).data('id')   // 或者用attr方法
  // console.log(id)
  // 询问是否删除  
  layer.confirm('确定删除吗？',function (index) {
    // do something
    // 确定发请求
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let {status,message} = res.data
      if (status === 0) {
        layer.msg(message)
        // 更新
        renderCategory()
      }
    })
    layer.close(index)
  })
})

// 添加
// 点击按钮 出弹层
let addIndex
$('.add').on('click',function () {
  // 设置弹出的内容
  addIndex = layer.open({
    type:1,
    area:['500px','250px'],
    title: '添加类别',
    content: $('#tpl-add').html()
  });  
})
// 提交表单 发请求 完成发送
$('body').on('submit','#add-form',function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/category/add',data).then(res => {
    let {status,message} = res.data
    if (status === 0) {
      layer.msg(message)
      renderCategory()
      layer.close(addIndex)
    }
  })
})

// 修改
// 点击编辑按钮 出弹层
let editIndex
$('tbody').on('click','button:contains("编辑")',function () {
  // 设置弹出的内容
  editIndex = layer.open({
    type:1,
    area:['500px','250px'],
    title: '编辑类别',
    content: $('#tpl-edit').html()
  });
  let data = $(this).data() 
  // console.log(data)
  // $('#edit-form input[name="name"]').val(data.name)
  // $('#edit-form input[name="alias"]').val(data.alias)
  // $('#edit-form input[name="id"]').val(data.id)
  // 使用layui的form模块，快速数据回填
  let form = layui.form
  form.val('edit',data)

})
// 表单提交，完成修改
$('body').on('submit','#edit-form',function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/category/update',data).then(res => {
    let {status,message} = res.data
    if (status === 0) {
      layer.msg(message)
      renderCategory()
      layer.close(editIndex)
    }
  })
})